<template>
	<view class="global">
		<view class="img">
			<image src="/static/login.png" />
		</view>
		<view class="formBox">
			<form>
				<input class="inputBox" type="text" placeholder="账号" v-model="username" />
				<input class="inputBox" type="password" placeholder="密码" v-model="password" />
				<button class="btn" @click="login('tabcompage')">登录</button>
			</form>
		</view>
		<view class="registerBox" @click="goRegister('register')">
			<text>注册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login() {
				if (!this.username.trim()) {
				    uni.showToast({ title: '请输入账号', icon: 'none' });
				    return;
				  }
				  if (!this.password.trim()) {
				    uni.showToast({ title: '请输入密码', icon: 'none' });
				    return;
				  }
				
				  uni.showToast({
				    title: '登录成功',
				    icon: 'success'
				  });
				  uni.switchTab({
				    url: '/pages/tabBar/UserPage/UserPage'
				  });
			},

			goRegister(e) {
				if (typeof e === 'string') {
					uni.navigateTo({
						url: '/pages/login/' + e + '/' + e
					});
				} else {
					uni.navigateTo({
						url: e.url
					});
				}
			}

		}
	}
</script>

<style>
	.global {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.formBox {
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		width: 100%;
		max-width: 500rpx;
		box-sizing: border-box;
	}

	.img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.inputBox {
		width: 100%;
		height: 70rpx;
		padding: 0 30rpx;
		margin-top: 20rpx;
		background-color: #f8f9fa;
		border: 1px solid #eaeaea;
		border-radius: 12rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		margin-top: 40rpx;
		background-color: #007aff;
		color: white;
		font-size: 32rpx;
		border: none;
		border-radius: 12rpx;
	}

	.registerBox {
		margin-top: 30rpx;
		color: #007aff;
		font-size: 28rpx;
	}
</style>